<template>
	<view class="bg-gray">
		<view class="width">
			<vip></vip>
			<view class="linebox">
				<view class="bg-white commonbg">
					<view class="font15 flex-row-between bold">
						{{info.name}}
						<view class="yellow  flex-row-start font500">
							<view class="font13">￥</view>
							<view class="font18">0</view>
							<!-- <view class="font13">起</view> -->
						</view>
					</view>
					<view class="color6 fontbottom">
						潺潺泉水，轻抚岁月。体会它的温柔，找到心灵深处的宁静与放松。花水湾一直以天然温泉闻名，社区温泉对业主成本价提供服务，线上预定付费，扫码入池，限流开放。
					</view>
				</view>
			</view>
			<view class="bg-white boxin">
				<view class="flex-row-between boxitem">
					预约日期
					<view @click="showPicker = true">
					  {{chooseTime}}
					  <u-icon name='arrow-right'></u-icon>
					</view>
				</view>
				<view class="flex-row-between boxitem">
					姓名
					<input class="uni-input" v-model='nikeName' placeholder="请输入" />
				</view>
				<view class="flex-row-between boxitem">
					电话
					<input class="uni-input" v-model='phone' placeholder="请输入" />
				</view>
				<view class="flex-row-between boxitem">
					应急联系电话
					<input class="uni-input" v-model='emergencyPhone' placeholder="请输入" />
				</view>
			</view>
			<view class="linebox lineboxbottom">
				<view class="bg-white commonbg">
					<view class="font15 flex-row-start bold">
						<view class="line"></view>
						注意事项
					</view>
					<view class="color6 fontbottom" v-for="(item,index) in zhuyi" :key='index'>
						{{ item }}
					</view>
				</view>
			</view>
		</view>
		<bottomsubmit title='会员卡支付' 
		@pay='submit'
		:vip='true' url='/pages/hotspring/buyvip' price='0'></bottomsubmit>
		<u-picker
			 v-model="showPicker"
			 mode="time" 
			 start-year='2025'
			 :confirm-color="lightColor" 
			 :params='params'
			 @confirm="timeConfirm">
		</u-picker>
	</view>
</template>

<script>
	import bottomsubmit from "@/components/huashuiwan/bottomsubmit.vue"; //导航栏模块
	import vip from "@/components/huashuiwan/vip.vue"; //导航栏模块
	import { getRoom,placeOrder } from "@/api/hotspring.js";
	export default {
		data() {
			return {
				//时间弹窗
				showPicker:false,
				chooseTime:'请选择',
				params:{
					year: true,
					month: true,
					day: true,
				/* 	hour: true,
					minute: true,
					second: false, */
					// 选择时间的时间戳
					timestamp: true,
				},
				nikeName:'',
				emergencyPhone:'',
				phone:'',
				info:{},
				zhuyi:[
					'1.温泉浴可反复浸泡，每隔20分钟应上池边歇歇，喝点饮料补充水分',
					'2.在热腾腾的温泉池里，爱美的女性可以敷上面膜，或用冷毛巾抹抹脸，更有利于美容',
					'3.温泉水中含矿物质，泡过温泉后尽量少用沐浴液，用清水冲身更有利于保持附着在皮肤上的矿物质',
					'4.泡温泉时不要同时按摩。因为泡温泉时身体的血液循环和心脏的跳动次数都加快，如果同时按摩会加大了心脏的负担',
				]
				
			};
		},
		components:{
			bottomsubmit,
			vip
		},
		onShow() {
			this.getList()
		},
		methods:{
			submit(){
				if(this.chooseTime=='请选择'){
					uni.showToast({
						title: "选择日期！",
						icon: "none",
						duration: 1500,
					});
					return false
				}
				let data = {
					emergencyPhone:this.emergencyPhone,
					id:this.info.id,
					nikeName:this.nikeName,
					phone:this.phone,
					appDate:this.chooseTime
				}
				 placeOrder(data).then(res=>{
					 uni.showToast({
					 	title: "预定成功,请在订单里查看信息！",
					 	icon: "none",
					 	duration: 1500,
					 });
					 setTimeout(function () {
						 uni.navigateTo({
						 	url:'/pages/myorder/index'
						 })
					 },2000)
				 })
			},
			/** 桌号列表 **/
			getList(){
				getRoom().then(res=>{
					this.info = res[0]
				})
			},
			/**
			 * 时间选择
			 */
			timeConfirm(res){
				this.chooseTime = res.year+'-'+res.month+'-'+res.day
			},
		}
	}
</script>

<style scoped lang="scss">
	.boxin{
		margin-top: 10px;
	}
	.fontbottom{
		line-height: 24px;
		margin-bottom: 5px;
	}
	.lineboxbottom{
		padding-bottom: 60px;
	}
</style>